import { defineConfig, loadEnv, ConfigEnv, UserConfig, PluginOption } from 'vite'
import vue from '@vitejs/plugin-vue'
import Inspect from 'vite-plugin-inspect'
import { onCreateSvgIconsPlugin } from './src/vite/plugin/svgSprite'
import { viteMockServe } from 'vite-plugin-mock'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import postcssPxToViewport from 'postcss-px-to-viewport'

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const isBuild = command === 'build'

  const env = loadEnv(mode, process.cwd(), '')
  return {
    plugins: [
      vue(),
      onCreateSvgIconsPlugin({ svgoOptions: isBuild }) as PluginOption,
      viteMockServe({
        mockPath: 'mock',
        enable: true, // 是否启用 mock 功能
        watchFiles: true, // 是否监视mockPath对应的文件夹内文件中的更改
        logger: true // 是否在控制台显示请求日志
      }) as PluginOption,
      Components({
        resolvers: [IconsResolver()]
      }),
      Icons({})

      // Inspect({
      //   build: true,
      //   outputDir: '.vite-inspect'
      // })
    ],

    resolve: {
      // '@': path.resolve(__dirname, './src') // 路径别名
      alias: [{ find: '@', replacement: '/src' }],

      // 不建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。
      extensions: ['.ts', '.js', '.jsx', '.tsx', '.json', '.mjs']
    },
    // base: '/foo/',
    define: {
      __APP_ENV__: JSON.stringify(env.VITE_SOME_KEY) // 在任何你需要使用环境变量的地方
      // VITE_PACK_ENV: JSON.stringify(env.VITE_PACK_ENV), // 在任何你需要使用环境变量的地方
    },
    server: {
      origin: 'http://127.0.0.1:8080',
      proxy: {
        // 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
        // '/foo': 'http://localhost:4567',
        // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
        '/api': {
          target: 'http://127.0.0.1:3000',
          changeOrigin: true
          // rewrite: (path) => path.replace(/^\/api/, ''),
        }
      }
    },
    build: {
      rollupOptions: {
        // 预构建的依赖
        external: ['vue', 'vue-router' /* 添加其他依赖 */],

        output: {
          // 预构建的依赖输出到一个单独的文件
          manualChunks: {
            vendor: ['react', 'react-dom' /* 添加其他依赖 */]
          }
        }
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          // additionalData: `$injectedColor: orange;` // 全局变量
          additionalData: `@import '/src/assets/styles/sass/variables.scss';` // 引入全局变量文件
        }
      },
      // h5 端，需要开启 postcss-px-to-viewport
      postcss: {
        plugins: [
          // viewport 布局适配
          // postcssPxToViewport({
          //   viewportWidth: 375 // 设计稿的视口宽度
          //   // unitPrecision (Number) 单位转换后保留的精度
          //   // landscapeUnit (String) 横屏时使用的单位
          //   // landscapeWidth (Number) 横屏时使用的视口宽度
          // })
        ]
      }
    }
  }
})
